<template>
  <div class="container">
    <el-form ref="formRef" class="" :model="config" label-width="140px">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        tabPosition="top"
        class="tabs"
      >
        <el-tab-pane label="系统基本信息" name="first">
          <el-card class="page-card">
            <div class="flex-wrap">
              <el-form-item
                v-for="(item, key) in configKeys[0]"
                :key="key"
                :label="$language.local(key)"
                :prop="key"
              >
                <xy-input v-model="config[key]"></xy-input>
              </el-form-item>
            </div>
          </el-card>
        </el-tab-pane>

        <el-tab-pane label="功能权限设置" name="second">
          <el-card class="page-card">
            <div class="flex-wrap">
              <el-form-item
                v-for="(item, key) in configKeys[1]"
                :key="key"
                :label="$language.local(key)"
                :prop="key"
              >
                <xy-input v-model="config[key]"></xy-input>
              </el-form-item>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="文件上传设置" name="third" class="file-setting">
          <el-card class="page-card">
            <div class="flex-wrap">
              <el-form-item
                v-for="(item, key) in configKeys[2]"
                :key="key"
                :label="$language.local(key)"
                :prop="key"
              >
                <xy-input v-model="config[key]"></xy-input>
              </el-form-item>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="系统安全设置" name="fourth">
          <el-card class="page-card">
            <div class="flex-wrap">
              <el-form-item
                v-for="(item, key) in configKeys[3]"
                :key="key"
                :label="$language.local(key)"
                :prop="key"
              >
                <xy-input v-model="config[key]"></xy-input>
              </el-form-item>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div class="form-footer">
      <el-button
        type="primary"
        icon="el-icon-check"
        size="small"
        @click="onSubmit"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      config: {},
      configKeys: [
        {
          // webid: null,
          webname: "主站名称",
          weburl: "主站域名",
          webcompany: "公司名称",
          webaddress: "通讯地址",
          webtel: "客服电话",
          webfax: "传真号码",
          webmail: "管理员邮箱",
          webcrod: "主站备案号",
        },

        {
          webpath: "网站安装目录",
          webmanagepath: "后台管理目录",
          staticstatus: "URL重写开关", // 0 关闭 1 伪 URL 重写 2 生成静态
          staticextension: "静态URL后缀",
          memberstatus: "开启会员功能",
          commentstatus: "开启评论审核",
          logstatus: "开启管理日志",
          webstatus: "是否开启网站",
          webclosereason: "网站关闭原因",
          webcountcode: "网站统计代码",
        },
        {
          filepath: "文件上传目录",
          filesave: "文件保存方式",
          fileextension: "文件上传类型",
          videoextension: "视频上传类型",
          attachsize: "附件上传大小",
          videosize: "视频上传大小",
          imgsize: "图片上传大小",
          imgmaxheight: "图片最大高度",
          imgmaxwidth: "图片最大宽度",
          thumbnailheight: "缩略图生成高度",
          thumbnailwidth: "缩略图生成宽度",
          watermarktype: "图片水印类型", // 0 关闭 1 文字水印 2 图片水印
          watermarkposition: "图片水印位置",
          watermarkimgquality: "图片生成质量",
          watermarkpic: "图片水印文件",
          watermarktransparency: "水印透明度",
          watermarktext: "水印文字",
          watermarkfont: "文字字体",
          watermarkfontsize: "字体大小",
          // sysdatabaseprefix: "TaxCollection_",
          // sysencryptstring: "DTcms",
        },

        { IdentifyingCode: "系统登录短信验证码" },
      ],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      const response = await this.$http.get("/api/sysconfig/GetModel");
      this.config = response.data.Data;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    async onSubmit() {
      if (!this.$refs.formRef.validate()) {
        return;
      }
      const response = await this.$http.post(
        "/api/sysconfig/Edit",
        this.config
      );
      console.log(response);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  padding: 0 2rem;

  .el-tab-pane {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 0;
    width: 100%;
  }
  .file-setting {
    padding: 1rem 0;

    .page-card {
      width: 88%;
      .flex-wrap {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        .el-form-item {
          flex: 1;
          width: 33% !important;
          min-width: 33%;
          max-width: 33%;
          margin: 1ex 0;
        }
      }
    }
  }
}
</style>
